//新建一个js文件 navActive.js
//为了让外面的组件可以使用这个js的逻辑，所以要暴露
//在对象中书写的都是自定义指令的生命周期函数
//常用的两个 bind update 
export default {
    bind: function (el, binding) {
        //el是节点 binding是自定义指令的一些信息 默认的信息是没什么用的，通常情况下，我们追加信息到binding
        // 为后续的更新的生命周期中使用
        // console.log('bind', el, binding);
        // 可以通过value属性拿到传递过来的内容
        const options = binding.value
        const { className, classActive, currentIndex } = options;
        //通过原生js来操作dom结构
        const children = el.getElementsByClassName(className);
        // console.log(children);
        children[currentIndex].className += ` ${classActive}`
    },
    update(el, binding) {
        // console.log('update', el, binding);
        // 在update生命周期中，binding会多出一个oldvalue
        //用来存放数据(指令传递过来的数据)更新前的内容,而不是组件上数据改变；
        const options = binding.value;
        const oldOptions = binding.oldValue;
        const { currentIndex: oldCurIndex } = oldOptions;
        const { className, classActive, currentIndex } = options;
        //通过原生js来操作dom结构
        const children = el.getElementsByClassName(className);
        if (currentIndex == oldCurIndex) {
            return;
        } else {
            children[currentIndex].className += ` ${classActive}`
            children[oldCurIndex].className = className;
        }

    }
}